<div style="padding-top: 15px; padding-bottom: 15px;">
	<div class="container">
		<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>
		<h2>Minecraft</h2>
		<p>In this tutorial we will learn how to create a minecraft clone with a simple voxel generator, basic navigation and building capabilities.</p>
		<p>Most of this tutorial will be code based, TODO.</p>

		<!--Creating a world-->
		<h3>Creating a basic world</h3>

		<p>Lets start by creating a simple minecraft like world using trignometric functions. The code bellow generates a wordls with size (200, 200), the block height is calculated by the coside of x plus the cosine z times the sine of x.</p>
		<p>Feel free to experiment with the terrain generation code, until you find a configuration that you like.</p>

		<pre><code class="hljs javascript">function initialize()
{{'{'}}
var geometry = new BoxBufferGeometry(1, 1, 1);
var material = program.getMaterialByName("phong");

for(var x = 0; x < 200; x++)
{{'{'}}
	for(var z = 0; z < 200; z++)
	{{'{'}}
		var cube = new Mesh(geometry, material);
		cube.position.set(x, Math.floor(Math.cos(x / 25) * 5 + Math.cos(z / 20 * Math.sin(x / 100) * 2) * 3), z);
		scene.add(cube);
	{{'}'}}
{{'}'}}
{{'}'}}</code></pre>

		<p>The image bellow represents the result generated by the code above. The performance of this approach will be very slow since we are updating 40000 individual objects every frame, this will be very expensive on CPU and memory resources. But don't worry about it its totally fine we will improve this by merging all the cubes into a single mesh.</p>

		<img src="assets/learn/tutorial/minecraft/images/a.png" class="img-normal"/>


		<p>The code bellow shows how to create the world from merged geometry, by translating and merging multiple times the cube geometry into the same geometry.</p>
		<p>Performance will be really good, but there is a problem with this approach, to remove a cube from the geometry we have to change the hole geometry.</p>

		<pre><code class="hljs javascript">function initialize()
{{'{'}}
var geometry = new Geometry();
var cube = new BoxGeometry(1, 1, 1);
var matrix = new Matrix4();

for(var x = 0; x < 200; x++)
{{'{'}}
	for(var z = 0; z < 200; z++)
	{{'{'}}
		matrix.makeTranslation(x, heightFunction(x, z), z);
		geometry.merge(cube, matrix);
	{{'}'}}
{{'}'}}

var material = program.getMaterialByName("phong");
var mesh = new Mesh(geometry, material);
scene.add(mesh);
{{'}'}}</code></pre>

	</div>
</div>
